<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">

<body>

<wicket:extend>
  <form wicket:id="form" id="gradebookSpreadsheet" class="container-fluid px-0">
    <div id="gbConnectionTimeoutFeedback" class="sak-banner-warn" style="display:none;">
        <wicket:message key="feedback.connectiontimeout" />
    </div>
    <div id="gbReorderColumnsFailed" class="sak-banner-warn" style="display:none;">
        <wicket:message key="feedback.reordercolumnsfailed" />
    </div>

    <div wicket:id="addOrEditGradeItemWindow" />
    <div wicket:id="studentGradeSummaryWindow" />
    <div wicket:id="updateUngradedItemsWindow" />
    <div wicket:id="gradeLogWindow" />
    <div wicket:id="gradeCommentWindow" />
    <div wicket:id="deleteItemWindow" />
    <div wicket:id="gradeStatisticsWindow" />
    <div wicket:id="rubricPreviewWindow" />
    <div wicket:id="updateCourseGradeDisplayWindow" />
    <div wicket:id="sortGradeItemsWindow" />
    <div wicket:id="courseGradeStatisticsWindow" />
    <div wicket:id="bulkEditItemsWindow" />
    <div wicket:id="exportRubricWindow"></div>
    
    <script>
        rubricGradingPoints = 0;
        $('body').on('total-points-updated', function (e) {
          rubricGradingPoints = e.detail.value;
        });
    </script>
    <div wicket:id="rubricGradeWindow" />

    <div wicket:id="gradeTableArea" class="w-100">
        <div wicket:id="noAssignments" class="gb-noGbItems">
            <i class="fa fa-fw fa-table" aria-hidden="true"></i>
            <wicket:message key="no-assignments.label" />
            <div class="act">
                <button wicket:id="addGradeItem2" class="active gb-add-gradebook-item-button">
                    <wicket:message key="button.addgradeitem" />
                </button>
            </div>
        </div>

        <div id="grades-toolbar-1" class="gradesToolbar1 mb-2 d-flex flex-wrap justify-content-between align-items-center">
            <div>
                <button wicket:id="addGradeItem" class="button_color gb-add-gradebook-item-button">
                    <wicket:message key="button.addgradeitem" />
                </button>
                <div wicket:id="liveGradingFeedback" class="gb-live-feedback"></div>
            </div>
            <div class="captionToggleContainer">
                <wicket:enclosure>
                    <label for="filterByGroup" class="sr-only"><wicket:message key="filter.groups" /></label>
                    <select id="filterByGroup" wicket:id="groupFilter" class="form-select" aria-labelledby="filterByGroupLabel">
                        <option value="1">Section 1</option>
                        <option value="2">Section 2</option>
                    </select>
                </wicket:enclosure>
                <a wicket:id="captionToggle" href="javascript:void(0);" id="captionToggle" aria-popup="true" aria-controls="gradeTableCaption">
                    <span class="sr-only">
                        <wicket:message key="label.toolbar.togglehelp"/>
                    </span>
                </a>
            </div>
        </div>

        <div wicket:id="toolbar" id="gradebookGradesToolbar" class="btn-toolbar gradesToolbar2 position-relative">
            <div class="d-flex flex-wrap w-100 justify-content-between">
                <ul class="gb-toolbar-left my-2 pe-2 d-flex flex-wrap list-unstyled align-items-center">
                    <wicket:enclosure>
                    <li class="me-2 mb-1">
                        <div class="gb-student-filter">
                            <label for="studentFilterInput" class="sr-only"><wicket:message key="filter.students"/></label>
                            <input type="text" id="studentFilterInput" class="form-control" aria-controls="gradeTable" wicket:id="studentFilter" wicket:message="placeholder:filter.students" accesskey="f" aria-labelledby="studentFilterLabel" />
                            <a class="gb-student-filter-clear-button" wicket:message="title:filter.studentsclear" href="javascript:void(0)">
                                <i class="fa fa-times-circle" aria-hidden="true"></i>
                            </a>
                        </div>
                    </li>
                    </wicket:enclosure>
                    <wicket:enclosure>
                    <li class="me-2 mb-1"><span wicket:id="groupFilterOnlyOne" class="gb-group-title" role="status">Section 001</span></li>
                    </wicket:enclosure>
                    <li class="gb-student-summary"><!-- Populated by JavaScript --></li>
                </ul>
                <ul wicket:id="gbToolbarColumnTools" class="gb-toolbar-right my-2 d-flex flex-wrap list-unstyled align-items-center">
                    <li class="gb-grade-item-summary me-2 mb-1"><!-- Populated by JavaScript --></li>
                    <li class="me-2 mb-1">
                        <button wicket:id="toggleGradeItemsToolbarItem" id="toggleGradeItemsToolbarItem" class="button" aria-haspopup="true" aria-expanded="false" aria-controls="gradeItemsTogglePanel"><wicket:message key="label.toolbar.toggleitems"/></button>
                    </li>
                    <li class="me-2 mb-1">
                        <button wicket:id="sortGradeItemsToolbarItem" id="sortGradeItemsToolbarItem" class="button" aria-haspopup="true" aria-expanded="false"><wicket:message key="label.toolbar.sortgradeitems"/></button>
                    </li>
                    <wicket:enclosure>
                    <li class="me-2 mb-1">
                        <button wicket:id="toggleCategoriesToolbarItem" id="toggleCategoriesToolbarItem" class="btn-link si" aria-controls="gradeTable"><wicket:message key="label.toolbar.togglecategories"/></button>
                    </li>
                    </wicket:enclosure>
                    <li class="mb-1">
                        <button wicket:id="bulkEditItemsToolbarItem" id="bulkEditItemsToolbarItem" class="button" aria-haspopup="true" aria-expanded="false"><wicket:message key="label.toolbar.bulkedit"/></button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="gradeTableOuterWrapper table-responsive">
            <h2 class="sr-only"><wicket:message key="gradetable.caption.summaryheader" /></h2>
            <div wicket:id="gradeTable" />
            <div wicket:id="noStudents" class="gb-noStudents">
                <wicket:message key="no-students.label" />
            </div>
        </div>
    </div>

  </form>

  <div wicket:id="gradeItemsTogglePanel" id="gradeItemsTogglePanel" style="display: none;"/>
</wicket:extend>

</body>
</html>
